import React from 'react';
import './input.scss';
import { InputShape } from './type';

export interface InputProps {
	value?: string;
	placeholder?: string;
	type?: string;
	shape?: `${InputShape}`;
	prefix?: React.ReactNode;
	suffix?: React.ReactNode;
	className?: string;
	shadowLayout?: 'inset' | 'outset' | 'none';
	disabled?: boolean;
	readOnly?: boolean;
	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
	onClickPrefix?: React.MouseEventHandler<HTMLDivElement>;
	onClickSuffix?: React.MouseEventHandler<HTMLDivElement>;
}

const Input = (props: InputProps) => {
	const {
		value,
		placeholder,
		type,
		shape,
		prefix,
		suffix,
		className,
		shadowLayout = 'inset',
		disabled,
		readOnly,
		onChange,
		onClickPrefix,
		onClickSuffix,
	} = props;
	return (
		<div
			className={`hs-ui-input ${className ?? ''} hs-ui-input-shape-${
				shape ?? 'primary'
			} hs-ui-input-shadow-${shadowLayout} ${disabled || readOnly ? 'hs-ui-input-disabled' : ''}`}>
			<div
				className="hs-ui-input__prefix"
				onClick={onClickPrefix ?? (() => {})}>
				{prefix}
			</div>
			<div className="hs-ui-input__wrapper">
				<input
					className=" hs-ui-input__inner"
					type={type ?? 'text'}
					placeholder={placeholder ?? 'PLEASE INPUT'}
					value={value ?? ''}
					onChange={onChange ?? (() => {})}
					disabled={disabled}
					readOnly={readOnly}
				/>
			</div>
			<div
				className="hs-ui-input__suffix"
				onClick={onClickSuffix ?? (() => {})}>
				{suffix}
			</div>
		</div>
	);
};

export default Input;
